<script setup lang="ts"></script>

<template>
  <ez-container class="layout-com">
    <ez-header>Header</ez-header>
    <ez-main>Main</ez-main>
    <ez-footer>Footer</ez-footer>
  </ez-container>
</template>

<style lang="scss">
  .center-util {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .layout-com {
    height: 300px;
  }
  .ez-header {
    background-color: #c6e2ff;
    @extend .center-util;
  }
  .ez-aside {
    background-color: #d9ecff;
    @extend .center-util;
  }
  .ez-main {
    background-color: #ecf5ff;
    @extend .center-util;
  }
  .ez-footer {
    background-color: #c6e2ff;
    @extend .center-util;
  }
</style>
